<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="false">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row :gutter="48">
          <!--<a-col :span="24">
            <a-form-model-item label="合同表ID" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="mainId">
              <a-input :disabled=formDisabled v-model="model.mainId" placeholder="请输入合同表ID"  ></a-input>
            </a-form-model-item>
          </a-col>-->
          <a-col :span="12">
            <a-form-model-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="khdaId">
              <select-customer-input
                v-if="showFk"
                title="关联客户"
                placeholder="请选择客户"
                :disabled="formDisabled"
                v-model="model.khdaId"
                :commercialType="htlx"/>
              
                <div style="display: flex; align-items: center;" v-else>
                  <SelectSupplierInput
                    style="width: 80%;"
                    title="关联供应商"
                    placeholder="请选择供应商"
                    :disabled="formDisabled"
                    v-model="model.khdaId"
                    :isProPayContract="true"/>
                    <a-icon type="plus" style="color:#1890FF;margin-left: 20px;" @click="$refs.unSupplier.getInitData()"/>
                  </div>

            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item v-if="showFk" label="是否为付款单位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isFk">
              <j-dict-select-tag
                :disabled="formDisabled"
                type="radio"
                v-model="model.isFk"
                dictCode="yes_no"
                placeholder="请选择是否为付款单位"/>
            </a-form-model-item>
            <a-form-model-item v-else label="是否为收款单位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isSk">
              <j-dict-select-tag
                :disabled="formDisabled"
                type="radio"
                v-model="model.isSk"
                dictCode="yes_no"
                placeholder="请选择是否为收款单位"/>
            </a-form-model-item>
          </a-col>
          <template v-if="signSealWay == 'online'">
            <a-col :span="12">
              <a-form-model-item label="对方是否电子签章" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isSignSeal">
                <j-dict-select-tag
                  :disabled="formDisabled"
                  type="radio"
                  v-model="model.isSignSeal"
                  @input="isSignSealInput"
                  dictCode="yes_no"
                  placeholder="请选择对方是否电子签章"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12" v-if="model.isSignSeal && model.isSignSeal == 1">
              <a-form-model-item label="对方盖章人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="psnName">
                <a-input :disabled="formDisabled" v-model="model.psnName" placeholder="请输入对方盖章人"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12" v-if="model.isSignSeal && model.isSignSeal == 1">
              <a-form-model-item label="联系方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="psnMobile">
                <a-input :disabled="formDisabled" v-model="model.psnMobile" placeholder="请输入联系方式"></a-input>
              </a-form-model-item>
            </a-col>
          </template>
          <!-- <template v-else-if="!showFk && signSealWay == 'online'">
            <a-col :span="12">
              <a-form-model-item label="我方经办人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="psnName">
                <a-input :disabled="formDisabled" v-model="model.psnName" placeholder="请输入我方盖章人"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="联系方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="psnMobile">
                <a-input :disabled="formDisabled" v-model="model.psnMobile" placeholder="请输入联系方式"></a-input>
              </a-form-model-item>
            </a-col>
          </template> -->
        </a-row>
      </a-form-model>
    </j-form-container>
    <unSupplierForm ref="unSupplier" />
  </a-spin>
</template>

<script>

import SelectCustomerInput from '@/views/scy/components/SelectCustomerInput'
import unSupplierForm from '@/views/erp/purchase/supplier/comp/unSupplierForm.vue'
import SelectSupplierInput from '@/views/scy/components/selectSupplier/SelectSupplierInput.vue'

export default {
  name: 'ErpOmcContractManagerEntrustForm',
  components: {
    SelectCustomerInput,
    unSupplierForm,
    SelectSupplierInput
  },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    },
    htlx: {
      type: [String, Number],
      default: '',
      required: false
    },
    signSealWay: {
      type: [String, Number],
      default: '',
      required: false
    },
    // true收款单位 false付款单位
    showFk: {
      type: Boolean,
      default: false,
      required: false
    },
    isCollectionpayment: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      model: {},
      labelCol: {},
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 24 },
      },
      confirmLoading: false,
      validatorRules: {
        khdaId: [
          { required: true, message: '请选择名称!' }
        ],
        isFk: [ { required: true, message: '请选择是否为付款单位!' } ],
        isSk: [ { required: true, message: '请选择是否为收款单位!' } ],
        isSignSeal: [ { required: true, message: '请选择对方是否电子签章!' } ],
        psnName: [ { required: true, message: '请输入对方盖章人!' } ],
        psnMobile: [
          { required: true, message: '请输入联系方式!' },
          { pattern: /(^1\d{10}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$)|(^\/$)/, message: '请输入正确的联系方式!' }
        ]
      },
      url: {
        add: '/api/erp/omc/contractmanager/erpOmcContractManagerEntrust/add',
        edit: '/api/erp/omc/contractmanager/erpOmcContractManagerEntrust/edit',
        queryById: '/api/erp/omc/contractmanager/erpOmcContractManagerEntrust/queryById'
      }
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model));
  },
  methods: {
    add() {
      if (this.signSealWay == 'online') {
        this.$set(this.modelDefault, 'isSignSeal', '0')
      } else {
        this.$set(this.modelDefault, 'isSignSeal', null)
      }
      this.edit(this.modelDefault);
    },
    edit(record) {
      this.$refs['form'].clearValidate();
      Object.assign(this.$data, this.$options.data())
      // this.$refs.form.resetFields();
      this.model = Object.assign({}, record);
      this.visible = true;
    },
    // 点击对方是否为电子签章
    isSignSealInput () {
      this.$set(this.model, 'psnName', null)
      this.$set(this.model, 'psnMobile', null)
    },
    submitForm() {
      const that = this;
      // 触发表单验证
      if (this.signSealWay != 'online') {
        this.$set(this.model, 'isSignSeal', null)
      }
      this.$refs.form.validate(valid => {
        if (valid) {
          if (!this.model.id) {
            this.model.id = parseInt(Math.random() * 1000000000000);
          }
          that.$emit('ok', this.model);
        }

      })
    }
  }
}
</script>
